<!--错误页-->
<template>
    <div :class="isShow?'':'hidden'" class="com-loading">
      <p >
        <span><i class="icon-loading"></i></span>
        <span>正在加载</span>
      </p>
    </div>

</template>
<script>
    export default {
        el:"#comLoading",
        data(){
        	return{
        		spinnerType:'fading-circle',
            	isShow:false
        	}
        },
      methods:{
        	open(){
        		this.isShow=true;
        	},
        	close(){
        		this.isShow=false;
        	}
        }
    };
</script>
<style>

.icon-loading{ padding-top: 1px; display: inline-block;background: url(./img/loading.png);background-size:contain;background-position: center;background-repeat: no-repeat;}
.com-loading{position: fixed;top: 50%;left: 50%;width: 120px;height: 120px;margin-left: -60px;margin-top: -60px;background: rgba(0,0,0,.5);border-radius: 5px;text-align: center;z-index: 9999;}
.com-loading.hidden{left:-100%;top:-100%;z-index: -999;}
.com-loading p{ height: 36px;margin-top: 30px;border: none;}
.com-loading p span{color: #fff;height: 36px;line-height: 36px;display: inline-block;float: left;font-size: 13px;width: 100%;text-align: center;}
.com-loading p span:last-child{margin-top: 10px;}
.com-loading p span i{width:36px ;height: 36px; -webkit-animation: rotateLoop 1.4s linear infinite;animation: rotateLoop 1.4s linear infinite;}

@-webkit-keyframes rotateLoop{
	from{-webkit-transform: rotate(0deg);}
	to{-webkit-transform: rotate(360deg);}
}
@keyframes rotateLoop{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
</style>
